<template>
  <div class="session-wrap">
    <div style="text-align: left; ">
      <el-upload
        :action="imgUpload"
        :file-list="fileList"
        list-type="picture"
        :on-preview="handlePictureCardPreview"
        :on-success="uploadSuccess"
        :before-upload="beforeAvatarUpload"
        :on-remove="handleRemove">
        <el-button type="success">{{moreImagesLabel && (moreImagesLabel.name ? moreImagesLabel.name : '点击上传') }}
        </el-button>
      </el-upload>
      <el-form>
        <el-form-item :label="'第'+ (Number(index)+1) +'个图片的链接：'" v-for="(item,index) in fileList" :key="index"
                      class="mt20">
          <el-input v-model="item.backUrl" placeholder="请输入链接地址" width="70%"></el-input>
        </el-form-item>
      </el-form>
    </div>
    <div slot="footer" class="dialog-footer" v-show="moreImagesLabel && !moreImagesLabel.btnFlag">
      <el-button @click="close()" size="mini">取消</el-button>
      <el-button type="primary" @click="saveModuleData" size="mini">确定</el-button>
    </div>
    <!-- </el-dialog> -->
  </div>
</template>
<script>
  // 引入资源
  export default {
    name: 'session',
    props: {
      moduleId: {
        type: String
      },
      moduleCode: {
        type: String
      },
      fileList: {
        type: Array,
        default:()=>{
          return []
        }
      },
      MoreMapDialogVisible: {
        type: Boolean
      },
      moreImagesLabel: {
        type: Object,
        default: () => {
          return {}
        }
      },
      //模块编码
      moduleData: {
        type: Object,
        default: () => {
          return {};
        }
      },
    },
    data() {
      return {                          // 是否显示单图上传
        imgUpload: this.utils.imgUploadUrl,          // 上传图片地址
        dialogVisible: false,                                        // 是否显示查看图片
      }
    },

    methods: {

      // 图片上传前验证
      beforeAvatarUpload (file) {
        const isLt2M = file.size / 1024 / 1024 < 2;
        if (!isLt2M) {
          this.$message.error('上传头像图片大小不能超过 2MB!')
        }

        if (this.moduleCode ==='PC_SINGLE_IMG_AD' && this.fileList !== null && this.fileList.length>0){
            this.$message.error('单图模板只允许上传1张图片');
            return false;
        }

        return isLt2M
      },


      // 上传图片保存信息
      saveModuleData(){
        let imgUlrList = this.fileList;
        if (imgUlrList !== null && imgUlrList.length>0){
          imgUlrList.forEach(item => {
            item.imgUrl = item.url;
          });
        }else{
          imgUlrList = [];
        }

        let params = {
          templateDataType: 0,
          variablesObject: {
            imgUlrList: imgUlrList,
          },
          platform: 2,
          moduleId: this.moduleId
        };
        this.utils.request.cmsPageModuleAddModuleData(params, res => {
          if (res.code === "0000") {
            this.$emit('MoreMapDialogVisibleFun');
            this.$emit('getModuleData');
            this.$message({"message": "保存成功", type: "success"});
          } else {
            this.$message({"message": res.msg, type: "error"});
          }
        })
      },

      // 图片回显  handlePictureCardPreview
      handlePictureCardPreview(file) {
        this.dialogImageUrl = file.imageUrl;
        this.dialogVisible = true;
      },

      // 删除已上传的图片  handleRemove
      handleRemove(file) {
        let this_ = this;
        if (this_.fileList && this_.fileList.length > 0) {
          this_.fileList.forEach((item, index) => {
            if (file.uid = item.uid) {
              this_.fileList.splice(index, 1)
            }
          })
        }
      },


      // 上传成功后回调
      uploadSuccess(file){
        this.fileList.push({url: file.data.imgUrl, backUrl: ''});
      },

      close(){
        // this.MoreMapDialogVisible=false
        this.$router.push("/Pages/Configuration/Cms/CmsPages");
      },

    },


  }
</script>
<style lang="scss" scoped>
  .el-button {
    margin-bottom: 5px
  }

  .session-wrap {
    width: 100%;
    height: auto;
    box-sizing: border-box;
    background-color: #fff;
    margin-bottom: 10px;
    .session-image-wrap {
      width: 100%;
      height: 125px;
      margin-bottom: 10px;
      .session-image {
        display: block;
        width: 100%;
        height: 100%;
      }
    }
  }

  .form {
    /deep/ .el-form-item, /deep/ .el-form-item__content, /deep/ .el-input__inner {
      width: 100%;
    }
  }

  .mt20 {
    margin: 20px 0;
  }
</style>
